import numStatus from '@/store/NumStatus';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
const Page1 = () => {
  const dispatch = useDispatch();
  // 通过useSelector获取仓库数据
  const { num, sarr } = useSelector((state: RootState) => ({
    num: state.handleNum.num,
    sarr: state.handleArr.sarr
  }))

  // 通过useDispatch修改仓库数据
  // dispatch({ type: '字符串(可以认为是一个记号)' ,val: 3 }) type是固定的,val是自定义的
  const handleNumChange = () => {
    // 同步的写法
    dispatch({ type: 'add2', val: 100 })
  }

  const handleNumChange2 = () => {
    // redux-thunk异步的写法, -> dispatch(异步执行函数)
    // dispatch((dis: Function) => {
    //   setTimeout(() => {
    //     dis({ type: 'add1' })
    //   }, 1000);
    // })

    // 优化 redux-thunk异步写法
    //dispatch(调用状态管理中的asyncAAdd1)
    dispatch(numStatus.asyncAction.asyncAAdd1);

  }

  // 对数组的操作
  // const { sarr } = useSelector((state: RootState) => ({
  //   sarr: state.handleArr.sarr
  // }))
  const handleArrChange = () => {
    dispatch({ type: 'sarrpush', val: 10 })
  }
  return (
    <div>
      Page1页面  {num}
      <button onClick={handleNumChange}>同步按钮</button>
      <button onClick={handleNumChange2}>异步按钮</button>
      <button onClick={handleArrChange}>按钮数组</button>
      <p>{sarr}</p>
    </div>
  );
}

export default Page1;

